<template>
<el-card class="good-container">
    <el-steps :active="activeNum" align-center finish-status="success" v-if="titShow">
      <el-step :title="item.title" :description="item.description" v-for="item in stepArr" :key="item.title"></el-step>
    </el-steps>
    <div class="tborder"></div>
      <!--订单信息-->
    <div class="orders">
      <div class="order_i">订单编号 {{orderDetail.orderSn}}</div>
      <div class="order_i">下单时间 {{orderDetail.createTimes}}</div>
      <div class="order_i">订单状态 {{orderDetail.status}}</div>
    </div>
    <el-descriptions  direction="vertical" :column="7" border style="text-align: center;">
        <el-descriptions-item label="商品名称">
          <div style="max-width:400px;">{{orderDetail.productName}}</div>
        </el-descriptions-item>
        <el-descriptions-item label="商品图片"><img class="g_i_img" :src="orderDetail.productImg" alt=""></el-descriptions-item>
        <el-descriptions-item label="商品规格*数量">
          <div style="line-height:30px;text-align:center;" v-for="item in itemList" :key="item.productId">{{item.specialValue}}*{{item.productQuantity}}</div>
        </el-descriptions-item>
        <el-descriptions-item label="团份数">{{orderDetail.tuanMemberNum}}</el-descriptions-item>
        <el-descriptions-item label="订单总金额">￥{{orderDetail.intTotalPrice/100}}</el-descriptions-item>
        <el-descriptions-item label="买家">{{orderDetail.shipName}}</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small">添加备注(仅自己可见)</el-tag>
        </el-descriptions-item>
    </el-descriptions>
     <!--收件人信息-->
     <div class="orders">
      <div class="order_i">收件人信息</div>
      <div class="order_i" v-if="activeNum==2"><el-button type="primary" size="mini" @click="changeAree">更改收货地址</el-button></div>
    </div>
     <div class="o_bor">
        <el-descriptions :column="2" >
          <el-descriptions-item label="收件人姓名：">{{orderDetail.shipName}}</el-descriptions-item>
          <!-- <el-descriptions-item label="收件人地区：">{{orderDetail.shipAddress}}</el-descriptions-item> -->
          <el-descriptions-item label="收件人电话：">{{orderDetail.shipMobile}}</el-descriptions-item>
          <el-descriptions-item label="收件人地址：">{{orderDetail.shipAddress}}</el-descriptions-item>
        </el-descriptions>
     </div>
      <!--团信息-->
    <div class="orders">
      <div class="order_i">拼团信息</div>
      <div class="order_i"></div>
    </div>
      <el-table
      ref="multipleTable"
      :data="tableData"
      border
      :highlight-current-row='true'
      :header-row-style="headStyle"
      style="width: 100%">
      <el-table-column label="序号"  type="index" align="center"></el-table-column>
      <el-table-column label="姓名" prop="memberName" align="center"></el-table-column>
      <el-table-column label="电话" prop="shipMobile" align="center"></el-table-column>
      <el-table-column label="规格/数量" prop="specialValueCount" align="center"></el-table-column>
      <el-table-column label="状态" prop="status" align="center"></el-table-column>
    </el-table>

    <div class="orders" v-if="activeNum==1">
      <div class="order_i"><span class="order_sapn">(还差{{orderDetail.lastNum}}人成团 剩余时间 {{timeDom.times}})</span></div>
      <div class="order_i"><el-button type="primary" size="small" @click="goSucce">一键成团</el-button></div>
    </div>
     <!--填写物流信息-->
     <div class="orders" v-if="activeNum==2">
      <div class="order_i">物流状态<span class="order_sapn">(等待发货)</span></div>
      <div class="order_i"></div>
    </div>
    <div class="o_bor" v-if="activeNum==2">
       <el-form label-width="120px" :model="formpt" inline>
             <el-form-item label="物流公司">
                <el-select style="width: 150px;" v-model="formpt.gaValue" placeholder="选择物流公司" @change='ChandleSelecA'>
                  <el-option
                     v-for="item in options" :key="item.autoAddId"
                    :value="item.autoAddId" :label="item.name" :disabled="item.disabled">
                  </el-option>
                </el-select>
             </el-form-item>
             <el-form-item label="物流单号">
               <el-input style="width: 250px;" v-model="formpt.orderSn" placeholder="请输入物流单号"></el-input>
             </el-form-item>
              <br />
              <el-form-item label="物流费用">￥0.00</el-form-item>
         </el-form>
     </div>
     <!--待收货物流信息-->
     <div class="o_box" v-if="activeNum==3">
       <div class="o_box_l">
         <div class="o_box_item">物流公司: {{shipping.gs}}</div>
         <div class="o_box_item">物流单号: {{shipping.order}} <a>更改物流单号</a></div>
         <div class="o_box_item">物流费用: ￥0.00</div>
       </div>
      <div class="o_box_r">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :timestamp="activity.timestamp">
            {{activity.content}}
          </el-timeline-item>
        </el-timeline>
      </div>
     </div>
      <!--申请退款-->
     <div class="orders" v-if="activeNum==5">
      <div class="order_i">退款记录<span class="order_sapn">(申请退款)</span></div>
      <div class="order_i"><span class="order_sapn">处理进度：等待商家处理退款</span></div>
    </div>
     <div class="o_bor" v-if="activeNum==5">
        <el-descriptions :column="2" >
          <el-descriptions-item label="退款发起人">王东旭</el-descriptions-item>
          <el-descriptions-item label="退款理由">个人原因</el-descriptions-item>
          <el-descriptions-item label="退款类型">仅退款</el-descriptions-item>
          <el-descriptions-item label="退款说明">不想买了</el-descriptions-item>
          <el-descriptions-item label="退款金额"><span class="order_sapn">￥34.5</span></el-descriptions-item>
          <el-descriptions-item label="申请时间">2015-12-20 12:00:00</el-descriptions-item>
          <el-descriptions-item label="">
            <img class="g_i_img" src="" alt="">
            </el-descriptions-item>
        </el-descriptions>
     </div>
     <div class="o_btn" v-if="activeNum==2">
         <el-button type="primary" @click="sendDood">发 货</el-button>
     </div>
       <!--修改地址-->
      <el-dialog title="修改收货地址" v-model="visible" width="450px"  center>
        <el-form :model="ruleForm" :rules="rules" ref="formRef" label-width="100px" class="good-form">
          <el-form-item label="收货人" prop="zitiName" style="width:100%">
            <el-input type="text" v-model="ruleForm.name" placeholder="请输入收货人名称"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="mobile" style="width:100%">
            <el-input type="text" v-model="ruleForm.mobile" placeholder="请输入联系电话"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address" style="width:100%">
            <el-input type="text" v-model="ruleForm.address" placeholder="请输入地址"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </span>
        </template>
  </el-dialog>
 </el-card>
</template>

<script>
import { onMounted, onUnmounted, reactive, ref, toRefs } from 'vue'
import {getData} from '@/utils/axios'
import { useRouter,useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { store } from '@/store'
export default {
  name: 'OrderDetail',
  setup() {
    const multipleTable = ref(null)
    const formRef = ref(null)
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      busbaseId:store.getters.busId,
      adminId:store.getters.adminId,
      loginName:store.getters.userName,
      orderSn:'',
      orderDetail:{},
      titShow:true,
      stepArr:[
        {'title':'用户开团','description':'2021-05-02 12:00:00'},
        {'title':'等待商品成团','description':'2021-05-02 12:00:00'},
        {'title':'等待商家发货','description':'2021-05-02 12:00:00'},
        {'title':'用户确认收货','description':'2021-05-02 12:00:00'},
        {'title':'订单交易完成','description':'2021-05-02 12:00:00'},
      ],
      activeNum:1,
      headStyle:{
         'color':'#000',
         'fontWeight':'550'
      },
      itemList:[],
      tableData:[],
      formpt:{
        gaValue:'',
        orderSn:''
      },
      options:[],
      activities:[{
          content: '支持使用图标',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
        }, {
          content: '支持自定义颜色',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        }],
        timeDom:{},
        inset:null,
        visible:false,
        ruleForm: {
          name: '',
          mobile: '',
          address: '',
      },
      rules: {
        name: [
          { required: 'true', message: '名称不能为空', trigger: ['change'] }
        ],
         mobile: [
          { required: 'true', message: '联系方式不能为空', trigger: ['change'] },
          { pattern: /^1[3|4|5|6|7|8][0-9]\d{8}$/, message: '手机号格式不对', trigger: ['blur'] }
        ],
         address: [
          { required: 'true', message: '详细地址不能为空', trigger: ['change'] }
        ],
       
      },
      shipping:{}
    })
    
    onMounted(() => {
      state.orderSn=route.query.id;
      getGoodDetail()
    })
    onUnmounted(()=>{
       clearInterval(state.timer);
    })

    const getGoodDetail = () => {//获取订单详情
      let params={
          adminId:state.adminId,
          busbaseId:state.busbaseId,
          orderSn:state.orderSn
        }
       getData('/order/orderBus/getOrderDetailByBusbaseSn',params).then(res=>{
                console.log(res.data,'订单详情')
                if(res.data.flag){
                  state.orderDetail=res.data.data.orderDetail;
                  state.tableData=res.data.data.tuanMemberList;//用户列表
                  state.itemList=res.data.data.itemList;
                  state.activeNum=res.data.data.orderDetail.state-1; //订单状态
                  if(res.data.data.orderDetail.state==2){//待成团
                   let now=Date.now()/1000;
                   if(res.data.data.endTime>0){
                      let time=res.data.data.endTime-now;
                       state.inset=setInterval(function () {              
                          fresh(time,state.timeDom)    
                            time--;             
                        }, 1000)
                   }

                  }
                  if(res.data.data.orderDetail.state==3){//待发货
                    getWugs()
                  }else if(res.data.data.orderDetail.state==4){//待收货
                      state.shipping.gs= res.data.data.shippingList[0].deliveryCorpName;
                      state.shipping.order= res.data.data.shippingList[0].deliverySn;
                       getWu()
                  }else if(res.data.data.orderDetail.state==6){//申请退款
                     state.titShow=false;
                  }else if(res.data.data.orderDetail.state==7){//拼团失败
                     state.titShow=false;
                  }   
                             
                 
                }
            }) 
    }
    const getWugs=()=>{//获取物流公司
       getData('/common/common/getMailDeliveryCorpList',{'loginName':''}).then(res=>{
                console.log(res.data,'获取物流公司')
                if(res.data.flag){
                    state.options=res.data.data;
                }
            }) 
    }
     const getWu=()=>{//获取物流信息
       getData('/order/orderBus/getOrderShipListByOrderSn',{busbaseId:state.busbaseId,orderSn:state.orderSn}).then(res=>{
                console.log(res.data,'物流信息')
                if(res.data.flag){
                  state.activities=[];
                  let wlxx=JSON.parse(res.data.data[0].expressData)
                  wlxx.forEach(item => {
                    let ele={
                      content: item.context,
                      timestamp:  item.time,
                      color: '#0bbd87'
                    }
                    state.activities.push(ele)
                  });
                }
            }) 
    }
    const ChandleSelecA=()=>{//物流公司选择
     console.log(state.formpt)
    }
    const goSucce=()=>{//一键成团
        ElMessageBox.confirm('将此订单马上成团, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'info'
                }).then(() => {
                 getData('/goods/goodsBus/oneKeyHelpTuanSuccess',{loginName:state.loginName,busbaseId:state.busbaseId,orderSn:state.orderSn,memberId:state.orderDetail.memberId}).then(res=>{
                    console.log(res.data,'一键成团')
                    if(res.data.flag){
                       ElMessage.success({message:'订单已成团，请及时发货',duration:1000})
                       getGoodDetail()
                    }
                })
                }).catch(() => {
                
              });
    }
    const sendDood=()=>{//发货
       if(state.formpt.gaValue==''){
            ElMessage.error({message:'请先选择物流公司',duration:1000})
            return false;
       }
       if(state.formpt.orderSn==''){
            ElMessage.error({message:'请先填写物流单号',duration:1000})
            return false;
       }
      let params={
          adminId:state.adminId,
          busbaseId:state.busbaseId,
          orderSn:state.orderSn,
          deliveryCorpId:state.formpt.gaValue,
          deliverySn:state.formpt.orderSn
        }
        getData('/order/orderBus/orderShip',params).then(res=>{
                console.log(res.data,'发货')
                if(res.data.flag){
                   getGoodDetail()
                }else{
                  ElMessage.error({message:res.data.message,duration:1000})
                }
            }) 

    }
    const changeAree=()=>{//打开地址修改
      state.ruleForm={
          name: state.orderDetail.shipName,
          mobile: state.orderDetail.shipMobile,
          address: state.orderDetail.shipAddress,
      }
      state.visible=true;
    }
     const submitForm=()=>{
        formRef.value.validate((valid) => {
                if (valid) {
                    console.log(state.ruleForm)
                    let {busbaseId,adminId}=state;
                    let {name,mobile,address}=state.ruleForm;
                    getData('/order/orderBus/updateOrderReceiveMsg',{adminId,busbaseId,'orderSn':state.orderSn,'shipName':name,'shipMobile':mobile,'shipAddress':address}).then(res=>{
                          console.log(res.data)
                        if(res.data.flag){
                          ElMessage.success({message:'修改成功',duration:1000})
                          state.visible = false
                          getGoodDetail()
                        }
                    })  
                }
              })
     }
    const adzo=function(num) {
        if (num < 10)
          return ('0' + num);
        else
          return num;
      }
    const fresh=function(data,dom){
      if (data <= 0) {
        dom.times = '00:00:00';
        dom.current = false;
        clearInterval(state.timer);
      } else {
        let h = adzo(parseInt(data / 3600));
        let m = adzo(parseInt((data / 60) % 60));
        let s = adzo(parseInt(data % 60));
        dom.times = h + '：' + m + '：' + s;
      }
    }
    return {
      ...toRefs(state),
      multipleTable,
      formRef,
      goSucce,
      getGoodDetail,
      getWugs,
      getWu,
      ChandleSelecA,
      sendDood,
      adzo,
      fresh,
      submitForm,
      changeAree,
    }
  }
}
</script>

<style scoped>
.tborder{border-top: 1px dashed #ccc;margin-top: 30px;}
.orders{display: flex;align-items: center;justify-content: space-between;width:100%;height: 60px;}
.order_sapn{color: #ff383d;}
.g_i_img{width: 100px;height:100px ;margin-right: 10px;float: left;}
.el-form-item{width: 45%;}
.o_btn{display: flex;align-items: center;justify-content: center;width:100%;height: 80px;}
.o_bor{border:1px solid #ccc;padding:18px 10px 10px 10px;}
.o_box{width: 100%;display: flex;border:1px solid #ccc;}
.o_box_l{width: 400px;min-height: 300px;padding:10px;background: #ddd;}
.o_box_item{font-size: 15px;line-height: 40px;}
.o_box_item a{margin-left: 20px;}
.o_box_r{width:100%;flex:1;padding:10px;}
</style>